

.welcome{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: rgba(0,0,0,0.3);
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	z-index: -1;
}

.MatrixPanel {
	padding-top: 170rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 200rpx;
}

.panel button,
.panel button::after,
.tabbar button,
.tabbar button::after,
.sidebar button,
.sidebar button::after {
	display: flex;
	border: none;
	background: none;
	padding: 0rpx;
	margin: 0rpx;
	line-height: normal;
}

.panel {
	position: fixed;
	top: 0;
	width: 710rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #FFFFFF;
	border-bottom: #1aad19 5rpx solid;
	box-shadow: 0rpx 10rpx 10rpx 5rpx #C8C7CC;
	padding: 20rpx;
	z-index: 2;
}

.panel image {
	min-width: 50rpx;
	width: 50rpx;
	height: 50rpx;
	border-radius: 100%;
	background-color: #f1f2f6;
	padding: 10rpx;
}

.panel button {
	padding: 10rpx 50rpx 10rpx 50rpx;
	background-color: #f1f2f6;
}

.rcview {
	display: flex;
	flex-direction: column;
}

.rcview view {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 20rpx;
}

.rcview view:last-child {
	margin-bottom: 0;
}

.rcview input {
	border-radius: 10rpx;
	background-color: rgba(241, 242, 246, 0.6);
	width: 200rpx;
	padding: 0 10rpx 0 10rpx;
	text-align: center;
}

.matrixview {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tabbar {
	background-color: #FFFFFF;
	box-shadow: 0rpx -10rpx 10rpx 5rpx #C8C7CC;
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	width: 100%;
	z-index: 2;
}

.tabbar .row {
	display: flex;
	flex-direction: row;
	margin-bottom: 10rpx;
	justify-content: space-between;
}

.row:last-child {
	margin-bottom: 0;
}

.tabbar button:last-child {
	margin-right: 0;
}

.tabbar button {
	width: 172.5rpx;
	padding: 10rpx 0 10rpx 0;
	background-color: #f1f2f6;
	margin-right: 10rpx;
	align-items: center;
	display: flex;
	justify-content: center;
	color: #333333;
}

.sidebar {
	z-index: 3;
	position: fixed;
	right: 0;
	bottom: 250rpx;
	width: 350rpx;
	height: 80rpx;
	background-color: #1AAD19;
	opacity: 0.8;
	border-radius: 20rpx 0 0 20rpx;
	transform: translateX(270rpx);
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sidebar image {
	width: 40rpx;
	height: 40rpx;
	margin-left: 20rpx;
}

.sidebar button {
	background-color: #f1f2f6;
	padding: 10rpx 20rpx 10rpx 20rpx;
	z-index: 4;
	border-radius: 10rpx;
	margin-right: 20rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
}

.sidebarshow {
	animation: in 0.7s ease-in-out;
	animation-fill-mode: forwards;
}

.sidebarshow .reverse{
	transform: rotate(180deg);
}


@keyframes in {
	0% {
	}

	100% {
		opacity: 1;
		transform: translateX(0rpx);
	}
}
